<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			li {
				list-style: none;
			}

			.bigbox {
				cursor: pointer;
				overflow: hidden;
				position: relative;
				width: 520px;
				height: 280px;
				background-color: pink;
				margin: 150px auto;
			}

			.bigbox ul {
				position: absolute;
				left: 0px;
				width: 5000px;
				height: 455px;
			}

			.bigbox ul li {
				width: 720px;
				float: left;
			}

			.bigbox .dianji li {
				display: none;
				z-index: 99;
				cursor: pointer;
				position: absolute;
				top: 200px;
				width: 25px;
				height: 35px;
				color: #fff;
				line-height: 35px;
				text-align: center;
				border-radius: 8px;
				background-color: rgba(0, 0, 0, .4);
			}

			.bigbox .left {
				left: 0px;
			}

			.bigbox .right {
				right: 0px;
			}

			.bigbox ol {
				position: absolute;
				bottom: 30px;
				left: 60px;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 80px;
				height: 15px;
				border-radius: 5px;
				background-color: rgba(0, 0, 0, .3);
			}

			.bigbox .current {
				background-color: #ff5000
			}

			.bigbox ol li {
				cursor: pointer;
				float: left;
				margin: 0px 3px;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background-color: #fff;
			}
		</style>
		<script src="../js/jquery-3.6.3.min.js"></script>
		<script>
			$(function() {
				var index = 0;
				var timer = null;
				var option = $('.bigbox>ul>li').length;
				var li = $('<li><img src="images/1.jpg" alt=""></li>')
				$('.bigbox>ul').append(li);
				var imgwidth = $('.bigbox ul li').width();

				go(); 
				$(".bigbox ul").mouseover(function(){
					//$(this).stop();
					window.clearInterval(timer);
				}).mouseout(function(){
					go();
				});	
				function go() {
					timer = setInterval(function() {
						if (index < option) {
							index++;

							$(".bigbox ul").stop().animate({
								left: -imgwidth * index + 'px'
							})
						}
						if (index == option) {
							$(".bigbox ul").stop().animate({
								left: -imgwidth * index + 'px'
							})

							index = 0;
							$(".bigbox ul").animate({
								left: -imgwidth * index + 'px'
							}, 0)
						}
						console.log(index);

						$("ol li").eq(index).addClass('current').siblings().removeClass();
					}, 2000);
				}
			})
		</script>
	</head>

	<body>
		<div class="bigbox">
			<ul>
				<li>
					<img src="images/1.jpg">
				</li>
				<li>
					<img src="images/2.jpg">
				</li>
				<li>
					<img src="images/3.jpg">
				</li>
				<li>
					<img src="images/4.jpg">
				</li>
				<li>
					<img src="images/5.jpg">
				</li>
			</ul>
			<ol>
				<li class="current"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		</div>

	</body>


</html>
